<div class="video-player">
  <div>
    <video id="player" crossorigin="anonymous">
      <source ng-repeat="preview in video.previews" ng-src="{{ preview.uri | trusted }}" type="video/mp4" />
      Your browser does not support HTML5 video.
    </video>
  </div>
</div>

<div class="video-controls">
  <div class="volume-controls">
    <div class="mute-toggle-button" ng-class="{'volume-toggle-muted': muted, 'volume-toggle-unmuted': !muted}" ng-click="toggleMute()"
                                                                                                               title="{{ 'VIDEO_TOOL.PLAYER.MUTE' | translate }}"></div>
    <div class="volume-slider" title="{{ 'VIDEO_TOOL.PLAYER.VOLUME' | translate }}">
      <input type="range" value="100" ng-class="{'volume-slider-muted': muted, 'volume-slider-unmuted': !muted}" ng-model="volume" ng-change="setVolume()">
    </div>
  </div>
  <div class="playback-controls">
    <div class="playback-controls-wrapper">
      <div class="playback-jump-to-start" ng-class="{disabled:positionStart}" ng-click="previousSegment()"
                                                                              title="{{ 'VIDEO_TOOL.PLAYER.PREVIOUS_SEGMENT' | translate }}"></div>
      <div class="playback-previous-frame" ng-class="{disabled:playing}" ng-click="previousFrame()"
                                                                         title="{{ 'VIDEO_TOOL.PLAYER.PREVIOUS_FRAME' | translate }}"></div>
      <div class="play" ng-class="{'playback-toggle-pause': playing, 'playback-toggle-play': !playing}" ng-click="play()"
                                                                                                        title="{{ playButtonTooltip | translate }}"></div>
      <div class="playback-next-frame" ng-class="{disabled:playing}" ng-click="nextFrame()"
                                                                     title="{{ 'VIDEO_TOOL.PLAYER.NEXT_FRAME' | translate }}"></div>
      <div class="playback-jump-to-end" ng-class="{disabled:positionEnd}" ng-click="nextSegment()"
                                                                          title="{{ 'VIDEO_TOOL.PLAYER.NEXT_SEGMENT' | translate }}"></div>
    </div>
  </div>
  <div class="timecode-controls">
    <div class="timecode-wrapper">
      <div class="timecode-segments">

        <div class="time-value">
          <div class="timecode-input">
            <input id="timecode-hour" name="hour" type="number"
                                                  max="59" maxlength="2"
                                                           ng-change="changeTime(time)"
                                                           ng-model="time.hours">
            <span class="colon-sep">:</span>
          </div>
          <div class="timecode-label">
            <label for="timecode-hour">Hr</label>
          </div>
        </div>

        <div class="time-value">
          <div class="timecode-input">
            <input id="timecode-minute" name="minute" type="number"
                                                      max="59" maxlength="2"
                                                               ng-change="changeTime(time)"
                                                               ng-model="time.minutes">
            <span class="colon-sep">:</span>
          </div>
          <div class="timecode-label">
            <label for="timecode-minute">Min</label>
          </div>
        </div>

        <div class="time-value">
          <div class="timecode-input">
            <input id="timecode-second" name="second" type="number"
                                                      max="59" maxlength="2"
                                                               ng-change="changeTime(time)"
                                                               ng-model="time.seconds">
            <span class="colon-sep">.</span>
          </div>
          <div class="timecode-label">
            <label for="timecode-second">Sec</label>
          </div>
        </div>

        <div class="time-value frame-value">
          <div class="timecode-input">
            <input id="timecode-frame" name="frame" type="number"
                                                    max="999" maxlength="3"
                                                              ng-change="changeTime(time)"
                                                              ng-model="time.milliseconds">
          </div>
          <div class="timecode-label">
            <label for="timecode-frame">Ms</label>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>
